<template>
	<view>
		<view class="flex align-center p-2" hover-class="bg-light">
			<image :src="avatar" style="width: 100rpx;height: 100rpx;" class="rounded-circle"></image>
			<view class="flex flex-column flex-1 px-2">
				<text class="font-lg font-weight-bold text-dark">{{ nickname }}</text>
			</view>
		</view>

		<uni-list class='mt-5'>
			<uni-list-item link :show-extra-icon="true" :extra-icon="cloudIcon" title="云端记录"
				@click="navigateTo('CloudRecords')">
			</uni-list-item>
			<uni-list-item link :show-extra-icon="true" :extra-icon="setIcon" title="我的设置"
				@click="navigateTo('user-set')">
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	import env from "@/env.js";
	import envConfig from '@/env_config.js';
	import $U from '@/common/util.js';

	const config = envConfig[env];
	const avatar = config['random_avatar_url'];
	const store = useStore();

	const nickname = computed(() => store.state.user.phone);

	const cloudIcon = reactive({
		size: 20,
		type: 'cloud-download'
	});
	const setIcon = reactive({
		size: 20,
		type: 'settings'
	});

	const navigateTo = (path) => $U.navigateTo(path);
</script>

<style lang="less">

</style>
